import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

// 创建切片
const appSlice = createSlice({
  // 切片唯一标识
  name: "app",

  // 初始化 state
  initialState: {
    msg: "~",
  },

  // 配置 reducers 纯函数
  //    每一个 key-value 都是一个 reducer 纯函数
  //    会接受到 state 与 action 两个参数
  //    函数中无需再针对 action.type 处理 switch 而是这个函数就处理根 key 同名的一个动作
  //    集成了 immer, 函数中可以直接对 state 做操作而无需担心会修改到源数据
  reducers: {
    setMsg(state, { payload }: PayloadAction<string>) {
      state.msg = payload;
    },
    addMsg(state) {
      state.msg += "~";
    },
  },
});

/**
 * 切片是个对象
 *    1. reducer  需要给到 configureStore 时使用
 *    2. actions
 *        1. 是个对象，对象中每一项是个动作创建函数【actionCreator】
 *        2. 对象的内容是与创建Slice时所提供的 reducers 有关的
 *        3. 调用某一个 actionCreator 就能得到一个动作对象
 *          appSlice.actions.addMsg()       => { type: 'app/addMsg', payload: undefined }
 *          appSlice.actions.addMsg("张三")  => { type: 'app/addMsg', payload: '张三' }
 *          appSlice.actions.setMsg('张三')  => { type: 'app/setMsg', payload: '张三' }
 *        4. 得到的动作对象再被 dispatch 派发的化，会执行到同名的 小reducer 去。
 *          dispatch(appSlice.actions.addMsg()) => reducers.addMsg 这个函数中
 *          dispatch(appSlice.actions.setMsg()) => reducers.setMsg 这个函数中
 *        5. 优势在于，不需要我们去处理 actionTypes 了。
 *        6. 将这些动作创建函数具名导出，给到组件中使用即可。
 */
// console.log("appSlice", appSlice);
// console.log(appSlice.actions.addMsg());
// console.log(appSlice.actions.addMsg("张三"));
// console.log(appSlice.actions.setMsg("张三"));

// export const addMsg = appSlice.actions.addMsg;
// export const setMsg = appSlice.actions.setMsg;
export const { addMsg, setMsg } = appSlice.actions;

export default appSlice.reducer;
